<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
import { customerGroupendingUpdate,customerGroupendingGrouplist,reqStaffList,customerGroupendingUserlist } from '@/api'
import { number } from 'echarts'
const emits = defineEmits(['upPageData'])
const props = defineProps({
	// 客户接收详情
	customerGroupDetails: {
		type: Array,
		default: []
	},
	// 群主发送详情
	groupLeaderDetails: {
		type: Array,
		default: []
	},
	//id
	id:{
		// type:number,
		default:''
	}
})
var data = ref()
var datas = ref()
data.value=props.customerGroupDetails
datas.value= props.groupLeaderDetails
const selectValue = ref()
const customerGroupendingUpdateFun = () => {
	emits('upPageData')
}
const options = [
	{
		value: '1',
		label: '群主已发送'
	},
	{
		value: '2',
		label: '群主未发送'
	},
	{
		value: '3',
		label: '发送失败'
	},
	// {
	// 	value: 'Option4',
	// 	label: 'Option4'
	// },
	// {
	// 	value: 'Option5',
	// 	label: 'Option5'
	// }
]
const optionsa = [
	{
		value: '1',
		label: '已发送'
	},
	{
		value: '2',
		label: '未发送'
	},
	// {
	// 	value: '3',
	// 	label: '发送失败'
	// },
	// {
	// 	value: 'Option4',
	// 	label: 'Option4'
	// },
	// {
	// 	value: 'Option5',
	// 	label: 'Option5'
	// }
]
const idO = ref(0)
const searchContent=ref()
const customerapi =(id)=>{
	// console.log(id)
	// debugger
	if (id) {
		idO.value = id
	}
	customerGroupendingGrouplist({id:idO.value,name:searchContent.value,status:selectValue.value}).then(res=>{
		// props.customerGroupDetails=res.data
		console.log( props.customerGroupDetails)
		data.value=res.data
	})
}
const customerapis =(id)=>{
	// console.log(id)
	// debugger
	// if (id) {
	// 	idO.value = id
	// }
	customerGroupendingGrouplist({id:idO.value,name:searchContent.value,status:selectValue.value}).then(res=>{
		// props.customerGroupDetails=res.data
		console.log( props.customerGroupDetails)
		data.value=res.data
	})
}
const staff_id = ref([])
const status = ref()
const leader=ref()
const reqStaffListapi = ()=>{

	reqStaffList({page:1,size:9999}).then(res=>{
		leader.value=res.data.item
	})
}

const customerGroupendingUserlistapi = (id)=>{
	if (id) {idO.value = id}
	customerGroupendingUserlist({id:idO.value,status:status.value,staff_id:staff_id.value}).then(res=>{
		datas.value=res.data
	})
}
reqStaffListapi()
// setTimeout(()=>{
// 	customerapi()
// 	customerGroupendingUserlistapi()
// },2000)
defineExpose({
	customerapi,
	customerGroupendingUserlistapi
})
</script>
<template>
	<div style="margin: 20px 20px 0 20px; background-color: #ffffff; border-radius: 10px">
		<el-tabs type="card" class="demo-tabs" style="padding: 20px 20px 0 20px">
			<el-tab-pane label="客户群接收详情">
				<div>
					<div>
						<span>共{{ data.length }}个群聊</span
						><span style="margin: 0 10px; color: #9d9d9d">|</span
						><el-icon style="color: #9d9d9d; padding-top: 5px"><Refresh /></el-icon>
						<span style="margin: 0 10px; color: #9d9d9d; cursor: pointer" @click="customerGroupendingUpdateFun()"
							>更新数据</span
						>
						<span style="margin: 0 10px; color: #9d9d9d">更新于:2022-07-22 10:02</span>
						<el-button type="primary" plain style="float: right">导出Excel</el-button>
					</div>

					<div class="CMtopStyle">
						<div class="searchStyle">
							<div style="color: #595959">搜索群聊:</div>
							<div class="searchStyleChild">
								<el-input v-model="searchContent" class="w-50 m-2" placeholder="输入群聊名称后回车" :suffix-icon="Search" @keyup.enter.native="customerapis" />
							</div>
						</div>
						<!-- <div class="topStyleChild1">
							<div style="color: #595959">群主:</div>
							<el-popconfirm teleported @confirm="confirm">
								<template #reference>
									<div class="Child2Style">
										<div class="Child2Content">333</div>
										<div class="child2StyleIcon">
											<el-icon>
												<ArrowDown />
											</el-icon>
										</div>
									</div>
								</template>
							</el-popconfirm>
						</div> -->
						<div>
							<span style="color: #595959; margin-left: 20px">送达状态:</span>
							<el-select v-model="selectValue" clearable placeholder="" style="margin-left: 5px" @change="customerapis">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>

						<div class="ResetStyle">
							<el-button size="large">重置</el-button>
						</div>
					</div>
					<div style="margin-bottom: 20px">
						<el-table :data="data" style="width: 100%">
							<el-table-column prop="name" label="群聊名称" />
							<el-table-column label="群主">
								<template #default="scope">
									<div class="app-words-box">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ scope.row.staff.name }}</span>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="staff.department" label="群主所属部门"> </el-table-column>
							<el-table-column prop="status" label="消息送达状态" >
								<template #default="scope">{{scope.row.status == 1?'群主已发送':scope.row.status == 2?'群主未发送':'发送失败'}}</template>
							</el-table-column>
							<el-table-column prop="create_time" label="群创建时间" />

							<el-table-column prop="operation" width="180" label="操作">
								<template #default="scope">
									<el-button link type="primary" size="small">聊天记录</el-button>
									<el-button link type="primary" size="small">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>

			<el-tab-pane label="群主发送详情">
				<div>
					<span>共{{ props.groupLeaderDetails.length }}个群聊</span><span style="margin: 0 10px; color: #9d9d9d">|</span
					><el-icon style="color: #9d9d9d; padding-top: 5px"><Refresh /></el-icon>
					<span style="margin: 0 10px; color: #9d9d9d; cursor: pointer" @click="customerGroupendingUpdateFun()"
						>更新数据</span
					>
					<span style="margin: 0 10px; color: #9d9d9d">更新于:2022-07-22 10:02</span>
					<el-button type="primary" plain style="float: right">导出Excel</el-button>
				</div>
				<div class="CMtopStyle">
					<!-- <div class="searchStyle">
						<div style="color: #595959">搜索群聊:</div>
						<div class="searchStyleChild">
							<el-input v-model="searchContent" class="w-50 m-2" placeholder="可搜索成员" :suffix-icon="Search" />
						</div>
					</div> -->
					<div class="topStyleChild1">
						<div style="color: #595959">群主:</div>
						<el-select
							v-model="staff_id"
							multiple
							placeholder=""
							style="width: 240px"
							@change="customerGroupendingUserlistapi"
							>
							<el-option
								v-for="item in leader"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</div>
					<div>
						<span style="color: #595959; margin-left: 20px">送达状态:</span>
						<el-select v-model="status" clearable placeholder="Select" style="margin-left: 5px" @change="customerGroupendingUserlistapi">
							<el-option v-for="item in optionsa" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>

					<div class="ResetStyle">
						<el-button size="large">重置</el-button>
					</div>
				</div>
				<div style="margin-bottom: 20px">
					<el-table :data="datas" style="width: 100%">
						<el-table-column label="群主">
							<template #default="scope">
								<div class="app-words-box">
									<div class="app-flex-left">
										<MyIcon class="app-down-icon primary-font" name="Person" />
										<span class="app-gap-words-left-xs">{{ scope.row.staff.name }}</span>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="staff.department" label="群主所属部门"> </el-table-column>
						<el-table-column prop="status" label="消息送达状态" />
						<el-table-column prop="group_size" label="本次群发群聊总数" />
						<el-table-column prop="send_size" label="已发送群聊数" />
						<el-table-column prop="time" label="确认送达时间" />

						<el-table-column prop="operation" width="180" label="操作">
							<template #default="scope">
								<el-button link type="primary" size="small">提醒发送</el-button>
								<el-button link type="primary" size="small">群发详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<style scoped>
.CMtopStyle {
	position: relative;
	display: flex;
	justify-content: flex-start;

	height: 84px;
	line-height: 84px;
	border-radius: 8px;
	background-color: #ffffff;
}
.topStyleChild1 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: -25px;
}
.searchStyle {
	display: flex;
}

.searchStyleChild {
	margin-left: 5px;
}
.ResetStyle {
	position: absolute;
	right: 3%;
}
</style>
